<template>
  <div>
    <router-view></router-view>
    <div class="userCenter" v-if="userInfo">
      <div class="baseInfo">
        <div>
          <img v-bind:src="userInfo.avatar" class="avatar"/>
        </div>
        <div class="base-info-text" v-if="userInfo">
          <p class="nickname">昵称：{{userInfo.nickname}}</p>
          <p>账号：{{userInfo.mobile}}</p>
          <p>等级：普通等级</p>
        </div>
      </div>
      <div class="singleList" @click="$refs.baseInfo.open();return false">
        <div class="list">
          <div class="item">
            <div>
              <div class="item-primary">
                <i class="icon icon-1"></i>
                <span class="item-content"> 个人信息 </span>
              </div>
            </div>
            <div class="">
              <i class="icon icon-arrow"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="twolists">
        <div class="list" v-link="{name:'myOrder',params:{}}">
          <div class="item">
            <div>
              <div class="item-primary">
                <i class="icon icon-2"></i>
                <span class="item-content"> 我的订单 </span>
              </div>
            </div>
            <div class="">
              <i class="icon icon-arrow"></i>
            </div>
          </div>
        </div>
        <div class="list" @click="$refs.coupon.open();return false">
          <div class="item">
            <div>
              <div class="item-primary">
                <i class="icon icon-3"></i>
                <span class="item-content"> 我的优惠券 </span>
              </div>

            </div>
            <div class="">
              <i class="icon icon-arrow"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="fourlists">
        <div class="list" v-link="{name:'history', params:{}}">
          <div class="item">
            <div>
              <div class="item-primary">
                <i class="icon icon-4"></i>
                <span class="item-content"> 我的足迹 </span>
              </div>
            </div>
            <div class="">
              <i class="icon icon-arrow"></i>
            </div>
          </div>
        </div>
        <div class="list" v-link="{name:'address', params:{}}">
          <div class="item">
            <div>
              <div class="item-primary">
                <i class="icon icon-5"></i>
                <span class="item-content"> 我的收货地址 </span>
              </div>

            </div>
            <div class="">
              <i class="icon icon-arrow"></i>
            </div>
          </div>
        </div>
        <div class="list" @click="$refs.suggestion.open();return false">
          <div class="item">
            <div>
              <div class="item-primary">
                <i class="icon icon-6"></i>
                <span class="item-content"> 意见反馈 </span>
              </div>

            </div>
            <div class="">
              <i class="icon icon-arrow"></i>
            </div>
          </div>
        </div>
        <div class="list" @click="$refs.service.open();return false">
          <div class="item">
            <div>
              <div class="item-primary">
                <i class="icon icon-7"></i>
                <span class="item-content"> 官方客服 </span>
              </div>

            </div>
            <div class="">
              <i class="icon icon-arrow"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <q-drawer right-side ref="baseInfo" v-if="userInfo">
        <v-base v-on:closeDrawer="closeItemFun" :userInfo="userInfo"></v-base>
      </q-drawer>
      <q-drawer right-side ref="suggestion">
        <v-suggest v-on:saveBase="closeItemFun"></v-suggest>
      </q-drawer>
      <q-drawer right-side ref="address">
        <v-address v-on:closeDrawer="closeItemFun"></v-address>
      </q-drawer>
      <!--<q-drawer right-side ref="coupon">
        <v-coupon  v-on:saveBase="closeItemFun"></v-coupon>
      </q-drawer>
      <q-drawer right-side ref="service">
        <v-service  v-on:saveBase="closeItemFun"></v-service>
      </q-drawer>-->
    </div>
    <v-loading :showLoading="showLoading"></v-loading>
  </div>
</template>
<script>
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import {AlertDialog} from '../../common/js/common'
  import BaseInfo from './base'
  import Suggest from './suggestion'
  import Address from './address'
  import Coupon from './coupon'
  import Service from './service'
  import Loading from '../loading/index'

  export default({
    data () {
      return {
        'userInfo': null,
        'address': null,
        'showLoading': false
      }
    },
    created () {
      this.fetchData()
    },
    methods: {
      fetchData: function () {
        this.showLoading = true
        // 获取用户基本信息
        let result = HttpRequest(linklist.userUrl, {}, 2)
        result.then((response) => {
          let body = response.body
          if (body.code === 0) {
            this.userInfo = Object.assign({}, body.data)
            this.userInfo.avatar = this.userInfo.avatar || '/static/avatar.png'
            this.userInfo.sex = this.userInfo.sex || 1
            this.showLoading = false
          }
          else {
            this.showLoading = false
            AlertDialog('提示', body.msg)
          }
        }, (response) => {
          this.showLoading = false
          AlertDialog('提示', '获取列表失败，请稍后再试', '确定', true)
        }).catch((response) => {
          this.showLoading = false
          AlertDialog('提示', '获取用户信息失败，请稍后再试', '确定', true)
        })
      },
      getAddress: function () {
      },
      selectedItemFun (item, event) {
        this.$refs.leftDrawer.open()
        this.selectedItem = item
      },
      closeItemFun () {
        this.$refs.baseInfo.close()
        this.$refs.suggestion.close()
        this.$refs.address.close()
        // this.$refs.coupon.close()
      }
    },
    components: {
      'v-base': BaseInfo,
      'v-suggest': Suggest,
      'v-address': Address,
      'v-coupon': Coupon,
      'v-service': Service,
      'v-loading': Loading
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  @import "./index.styl"
</style>
